<template>
  <div class="app">
    账号: <input type="text" v-model="account" /><br><br>
    密码: <input type="password" v-model="password" /><br><br>
    性别: 
      <input type="radio" v-model="gender" value="man" />男 
      <input type="radio" v-model="gender" value="girl" />女
      <br><br>
    爱好: 
      抽烟:<input type="checkbox" v-model="hobby" value="smoke" />
      喝酒:<input type="checkbox" v-model="hobby" value="drink" />
      打架:<input type="checkbox" v-model="hobby" value="fight" />
      放屁:<input type="checkbox" v-model="hobby" value="fart" />
      <br><br>
    所属地区:
      <select v-model="area">
        <option value="beijing" selected>北京</option>
        <option value="shanghai">上海</option>
        <option value="tianjin">天津</option>
        <option value="chengdu">成都</option>
      </select>
      <br> <br>
    其他信息:
      <textarea v-model="other"></textarea>
      <br> <br>
      <input type="checkbox" v-model="isAgress" /> 阅读并同意 <a href="#">用户协议</a>
      <br> <br>
      <button>提交</button>
  </div>
</template>

<script>
export default {
  name: "inputName",
  data() {
    return {
      account: "",
      password: "",
      gender: "",
      hobby: [],
      area: "北京",
      other: "",
      isAgress: ""
    };
  },
};
</script>

<style scoped>
.app {
  margin-top: 10px;
  background-color: #ddd;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
}
</style>